<div class="narrowby">
	<!-- ko if: selectedCategory -->
	<h2 class="subtitle" data-bind="text: selectedCategory().name()">Extendable dining tables</h2>
	<!-- /ko -->
	<p class="lbtxt">
		&nbsp;
	</p>
	
</div>
<div class="insidecontent">
	<div class="subpage_leftmenu">
		<!-- ko foreach: productCategories -->
		<div class="mgroup">
			<p class="mgrptitle">
				<a href='javascript:void(0);' data-bind="text: $data.name"></a><em></em>
			</p>
			<ul class="mlistitem" data-bind="foreach: $data.children()">
				<li>
					<a href='#' data-bind="text: $data.name, click: $root.onCategoryClicked, css: {'selected': $data.isSelected()}"></a>
				</li>
			</ul>
		</div>
		<!-- /ko -->
	</div>
	<div class="rpagecont">
		<div class="banner">
			<!-- ko if: selectedCategory -->
			<a href="#"><img data-bind="attr:{'src': selectedCategory().bannerImage()}"  width="721" height="254" alt=" " /></a>
			<!-- /ko -->
		</div>
		<div class="pageview">
			<a id="checkAll" data-bind="click: $root.onCheckAll, visible: view() == 'listview'">CHECK ALL</a><a class="add">ADD TO BAG</a><a href="" data-bind="click: function(){$root.switchView('gridview')} " class="gridview"></a><a href="" data-bind="click: function(){$root.switchView('listview')}" class="listview"></a>
		</div>
		<div data-bind="if: view() == 'listview'">
		<!-- ko foreach: products -->
		<div class="prodrow list">
			<!--div class="prodcell"-->
			<div class="prodcell" data-bind="click: $root.onProductMouseClicked">
				<div class="checkbox">
					<input data-bind="checked: $data.isChecked"  type="checkbox" class="checkItem">
				</div>
				<div class="pro-img">
					<a href='#' class="prodthumb"><img data-bind="attr:{'src': $data.listThumbImage()}" alt="" /> <span class="view"><span>Quick</span> Look</span></a>
				</div>
				<div class="pro-price">
					<span class="dInline font-color-black" data-bind="visible: $data.specialPrice()">List Price:</span>
					<span class="dInline font-color-black" data-bind="text: $data.specialPrice(),visible: $data.specialPrice()"></span><span class="dInline font-color-black"  data-bind="visible: $data.specialPrice()">$</span>
					<br/>
					<span class="dInline font-color-black" data-bind="visible: $data.specialPrice()">You Save: $</span><span class="dInline font-color-black" data-bind="text: $data.discoutAmount(),visible: $data.specialPrice()"></span> (<span  class="dInline font-color-black" data-bind="text: $data.discoutPercent(),visible: $data.specialPrice()"></span>)<span class="pro-list-price">Price: $<b data-bind="text: $data.retailPrice()"></b></span>
				</div>
				<div class="pro-desc">
					<p >
						Article no.: <span data-bind="text: $data.code()"></span>
					</p>
					<p data-bind="text: $data.description()">
					</p>
					<a href="#">See more detail</a>
				</div>
			</div>
		</div>
		<!-- /ko -->
		</div>
		<div class="topgrpprod" data-bind="if: view() == 'gridview'">
		<!-- ko foreach: productsRows-->
		<div class="prodrow">
			<!-- ko foreach: $data-->
			<div class="prodcell">
				<div class="floatedcell" data-bind="visible: $data.showFloat,event:{mouseleave: $root.onProductMouseout, click: $root.onProductMouseClicked} ">
						<p class="prodthumb">
							<a href="#"><img data-bind="attr:{'src': $data.gridThumbImage}" alt=""></a>
						</p>
						<div class="proddesc text-align-left">
							<p>
							<span>Article no.: </span><span data-bind="text: $data.code" data-bind="">
							</span>
							</p>
							<p data-bind="text: $data.shortDescription">
							</p>
						</div>
						<p class="listprice text-align-left" data-bind="visible: $data.specialPrice()">
							<span>List Price: $</span><span data-bind="text: $data.retailPrice"></span>
						</p>
						<p class="listprice text-align-left"  data-bind="visible: $data.specialPrice()">
							<span>You Save: $</span><span data-bind="text: $data.discoutAmount"></span>
							<span>(</span><span  data-bind="text: $data.discoutPercent"></span><span>)</span>
						</p>
						<p class="price text-align-left" >
							<span>Price: $</span><span data-bind="text: $data.specialPrice"></span>
						</p>
						<a href="#" class="moredetail">See more detail</a>
				</div>
				<div data-bind="event:{mouseenter: $root.onProductHover}">
					<div class="pro-name">
						<a data-bind="text: $data.name" href="#">Dining chairs</a>
					</div>
					<a  href="#" class="prodthumb"><img data-bind="attr:{'src': $data.gridThumbImage()}" alt=""></a>
					<div class="pro-price">
						$<span class="dInline font-color-black" data-bind="text: $data.retailPrice"></span><span data-bind="visible: $data.specialPrice()" class="pro-list-price">Now $<span  class="dInline" data-bind="text: $data.specialPrice"></span></span>
					</div>
				</div>
			</div>
			<!-- /ko -->
			<div class="clr"></div>
		</div>
		<!-- /ko -->
		</div>
		<ul class="paginator">
			<li class="prev">
				<a data-bind="click: $root.goPrevPage" href="#">&lt;PREVIOUS PAGE</a>
			</li>
			<!-- ko foreach: pages -->
			<li class="link">
				<a href="#" data-bind="text:$index() + 1, click: $root.onPaging, css: {'active': $data.active} "></a>
			</li>
			<!-- /ko -->
			<li class="next">
				<a href="#" data-bind="click: $root.goNextPage">NEXT PAGE&gt;</a>
			</li>
		</ul>
	</div>
	<div class="clr"></div>
</div>
